<template>
	<view>
		<u-tabs :list="navList" :current="current" :is-scroll="false" @change="tabsCurrent"></u-tabs>
		
		
		<view class="u-margin-top-20 u-margin-bottom-20">
			<w-Carclassify @current='changeCurrent'></w-Carclassify>
		</view>
		

		<view style="width: 700rpx;margin:20rpx auto;">
			<u-swiper name="cover" :list="banner" height="300"></u-swiper>
		</view>


		<view class="u-flex u-row-between u-flex-wrap" style="width: 700rpx;margin:20rpx auto 20rpx auto;color: #fff;">
			<view v-for="(item,index) in list" :key="index" class="class_block" @click="go(item,index)"
				:style="{'background':item.bg}">
				<view class="u-font-weight u-font-32">
					{{item.title}}
				</view>
				<view style="margin-top: 100rpx;" v-if="index==0">{{info.exerciseNum}}/{{info.freeQuestion}}</view>
				<view style="margin-top: 100rpx;" v-if="index==1">{{info.freeQuestion}}</view>
				<view style="margin-top: 100rpx;" v-if="index==2">仿真冲刺</view>
				<view style="margin-top: 100rpx;" v-if="index==3">{{info.mistakeQuestion}}</view>
				<!-- <view>{{info.mistakeQuestion}}</view>
				<view>{{info.mistakeQuestion}}</view>
				<view>{{info.mistakeQuestion}}</view> -->
				<image :src="item.image" :style="{width:item.width,height:item.height}"></image>
			</view>
		</view>

		<view style="margin: auto;width: 700rpx;">
			<u-button @click="buy" shape="circle" 
				:custom-style="{color:'#fff', background:'linear-gradient(180deg, #3CB4FE, #328DFB)'}">购买VIP</u-button>
		</view>
		
		
		<w-vip ref='vip'></w-vip>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				banner: [],
				navList: [{
						name: "科目一"
					},
					{
						name: "科目四"
					}
				],
				current: 0,
				car_type:1,
				info: {},
				list: [{
					title: "顺序练习",
					bg: 'linear-gradient(180deg, #3CB4FE 0%, #328DFB 100%)',
					image: '/static/free_1.png',
					width: '83rpx',
					height: '78rpx',
					url:'/pages/free/classify'
				}, {
					title: "随机练习",
					bg: 'linear-gradient(180deg, #10D8B2 0%, #04BDA2 100%)',
					image: '/static/free_1.png',
					width: '83rpx',
					height: '78rpx',
					url:'/pages/free/classify'
				}, {
					title: "模拟考试",
					bg: 'linear-gradient(180deg, #F4D40E 0%, #EFB608 100%)',
					image: '/static/free_2.png',
					width: '96rpx',
					height: '72rpx'
				}, {
					title: "错题汇总",
					bg: 'linear-gradient(180deg, #FFA067 0%, #FF7254 100%)',
					image: '/static/free_3.png',
					width: '73rpx',
					height: '77rpx'
				}]
			}
		},
		onLoad() {
			this.getBanner()
			
		},
		onShow() {
			this.question()
		},
		methods: {
			question(){
				this.$u.post('/user/questionStatistics', {
					car_type:this.car_type,
					subject:this.current?4:1
				}).then(res => {
					this.info=res;
				}).catch(err => {
				
				})
			},
			
			userInfo(){
				return new Promise((resolve,reject)=>{
					this.$u.post('/user/information', {
					}).then(res => {
						resolve(res)
					}).catch(err => {
					
					})
				})
			},
			 async buy(){
			   let userInfo= await this.userInfo();
			   if(!userInfo.vipId){
			   	this.$refs.vip.VipShow = true;
			   }
			},
			tabsCurrent(e){
				this.current=e;
				this.question()
			},
			getBanner() {
				this.$u.post('/index/banner', {}).then(res => {
					this.banner = res;
				}).catch(err => {

				})
			},
		
			go(item,index){
				let subject=this.current?4:1;
				if(index==0 || index==1){
					uni.navigateTo({
						url:"/pages/free/classify?subject="+subject+'&vip=0'+'&car_type='+this.car_type+'&type='+item.title
					})
					return
				}
				if(index==2){
					uni.navigateTo({
						url:"/pages/case/index?subject="+subject+'&vip=0'+'&car_type='+this.car_type+'&type='+item.title
					})
					return
				}
				if(index==3){
					uni.navigateTo({
						url:'/pages/mistakes/index'
					})
					return
				}
				
				
			},
			changeCurrent(e){
				this.car_type=e;
				this.question()
			}
		}
	}
</script>

<style scoped lang="scss">
	.class_block {
		width: 334rpx;
		height: 240rpx;
		border-radius: 10rpx;
		position: relative;
		padding: 20rpx;
		margin-bottom: 40rpx;

		image {
			position: absolute;
			right: 50rpx;
			bottom: 30rpx;
		}
	}
</style>
